<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/01.css">
    <link rel="stylesheet" href="css/02.css">
    <link rel="stylesheet" href="css/gouche.css">
    <link rel="stylesheet" href="css/common.css">
   
    <!-- <link rel="stylesheet" href="css/common.css"> -->
    <script src="js/jquery.min.js"></script>
  
    <script>
            window.onload=function(){
                let headli=$(".header-con li");
        let temp=$(".header-con #temp");
        let tempul=$(".header-con ul")
        let tempcon=$("#temp-con")
        let arr1=["轿车","SUV","轿跑车&敞篷车","MPV","纯电动车","车型筛选"]
        let arr2=["购车新方案","金融服务","在线购车","官方认证二手车","大学生&在线购车"]
        let arr3=["服务指南","保养维修及维护","选装配件","EQ客户服务"]
        let arr4=["设计美学","SUV","动力与效能科技","智能科技","豪华体验与之制造","奔驰制造"]
        let arr5=["品牌天下","品牌互动","客户承诺","企业社会责任","Mercedes me"]
        headli.mouseenter(function(){
            temp.slideDown()
            // temp.animate({
            //     opacity:1,
            // })
        
        if(Number($(this).index()+1)===1){
           tempcon.html("")
            for(var i=0;i<6;i++){
                let span=$(" <span></span>");
             
                span.html(arr1[i]).appendTo(tempcon);
             
                span.click(function(){
                   if($(this).index()===0){
                    location.href="jiaoche.html"
                   }
                   if($(this).index()===1){
                    location.href="list01.html"
                   }
                    
                 
              })
               
            }
         
            
        }
        
        if(Number($(this).index()+1)===2){
           tempcon.html("")
            for(var i=0;i<5;i++){
             
                let span=$(" <span></span>");
                span.html(arr2[i]).appendTo(tempcon);
                span.click(function(){
                   if($(this).index()===2){
                    location.href="gouche.html"
                   }
                    
                 
              })
            }
         
            
        }
        if(Number($(this).index()+1)===3){
           tempcon.html("")
            for(var i=0;i<4;i++){
             
                let span=$(" <span></span>");
                span.html(arr3[i])
                span.appendTo(tempcon)
                
            }
         
            
        }
        if(Number($(this).index()+1)===4){
           tempcon.html("")
            for(var i=0;i<6;i++){
             
                let span=$(" <span></span>");
                span.html(arr4[i])
                span.appendTo(tempcon)
            }
         
            
        }
        if(Number($(this).index()+1)===5){
           tempcon.html("")
            for(var i=0;i<5;i++){
             
                let span=$(" <span></span>");
                span.html(arr5[i])
                span.appendTo(tempcon)
            }
         
            
        }
        
        
        // if($(this).index())
          
        })
        tempul.mouseleave(function(){
          temp.slideUp()
              
            })
            var tit=document.querySelector("header");
            var titop=tit.offsetTop;
            window.onscroll=function(){
                var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
                if(scrolltop>titop){
                    tit.className="fix";
                }
                else{
                    tit.className=""
                }
            }
        
            }
        </script>
            
         

</head>

<body>

    <header id="head">
        <header class="header-con">
            <div class="left">
                <img src="img/logo.png" alt="">
            </div>
            <div class="center">
                <ul>
                    <li>车型</li>
                    <li>购车指南</li>
                    <li>客户服务</li>

                    <li>Mercedes me</li>
                    <li>梅赛德斯-AMG</li>
                    <div id="temp">
                            <div id="temp-con"></div>
    
                        </div>
                </ul>
                
            </div>
            <div class="right">
                <p class="p1"  id="userName" style="color:#fff; width: 110px;
                height: 30px;" >
            
                    <!-- <span id="inforName" style="padding: 20px">
                        <! <a href="zhuce.html" >注册</a> -->
                    <!-- </span> -->
                    <!-- <span style="display: none"> -->
                        <!-- <a href="submit.html">登录</a> -->
                    <!-- </span> --> 

                </p>
                <p class="p2">
                    <span>EQ</span>
                    <span></span>
                </p>
            </div>
        </header>
    </header>
    <main>
      
        <div id="wrap">
            <img src="img/bigdatu.jpg" alt="">
        </div>
        <div id="container">
            <div id="con-con">
                <li>梅赛德斯-奔驰</li>
                <li>梅赛德斯-AMG</li>
                <li>梅赛德斯-迈巴赫</li>

            </div>
        </div>
        <div class="con1">
            <span>在线购车</span>
        </div>
        <div id="session">
            <div id="session-con">
                <div class="box111">
                    <span>轿车</span>
                    <span>
                        <img src="img/arrow.png" alt="" class="arrow">
                    </span>
                </div>
                <ul class="u1">
                    <li>轿车</li>
                    <li>
                        SUV
                    </li>
                    <li>轿跑车&敞篷跑车</li>
                    <li>MPV</li>
                    <li>纯电动车</li>
                </ul>
                <div class="box2">
                    <h3>A级</h3>
                    <div class="left" class="common">
                        <img src="img/box2left.png" alt="">
                        <h4>长轴距A级轿车</h4>
                        <p>厂商建议零售价￥21.18万起*</p>
                        <p>月供￥407起*</p>
                    </div>
                    <div class="right" class="common">
                        <img src="img/box2right.png" alt="">
                        <h4>A级掀背车</h4>
                        <p>厂商建议零售价￥23.18万起*</p>
                        <p>月供￥370起*</p>
                    </div>
                </div>
                <div class="box3">
                    <h3>B级</h3>
                    <div class="left" class="common">
                        <img src="img/box3img.png" alt="">
                        <h4>B级运动旅游车</h4>
                        <p>厂商建议零售价￥23.18万起*</p>

                    </div>

                </div>

                <div class="box4">
                    <h3>C级</h3>
                    <div class="left" class="common">
                        <img src="img/box4img01.png" alt="">
                        <h4>长轴距C级运动轿车</h4>
                        <p>厂商建议零售价￥30.18万起*</p>
                        <p>月供￥429起*</p>
                    </div>
                    <div class="center" class="common">
                        <img src="img/box2right.png" alt="">
                        <h4>长轴距C级轿车</h4>
                        <p>厂商建议零售价￥31.18万起*</p>
                        <p>月供￥446起*</p>
                    </div>
                    <div class="right" class="common">
                        <img src="img/box2right.png" alt="">
                        <h4>标准轴距C级运功轿车</h4>
                        <p>厂商建议零售价￥31.18万起*</p>
                        <p>月供￥331起*</p>
                    </div>
                    <div class="right" class="common">
                        <img src="img/box2right.png" alt="">
                        <h4>标准轴距C级运功轿车</h4>
                        <p>厂商建议零售价￥31.18万起*</p>
                        <p>月供￥331起*</p>
                    </div>
                </div>

                <div class="box5">
                    <h3>E级</h3>
                    <div class="left" class="common">
                        <img src="img/box5img01.png" alt="">
                        <h4>新一代长轴E级运动轿车</h4>
                        <p>厂商建议零售价￥43.18万起*</p>
                        <p>月供￥670起*</p>
                    </div>
                    <div class="center" class="common">
                        <img src="img/box5img02.png" alt="">
                        <h4>新一代常周局E级轿车</h4>
                        <p>厂商建议零售价￥43.18万起*</p>
                        <p>月供￥670起*</p>
                    </div>
                    <div class="right" class="common">
                        <img src="img/box5img03.png" alt="">
                        <h4>新一代标准轴距E级运动版</h4>
                        <p>厂商建议零售价￥43.18万起*</p>
                        <p>月供￥671起*</p>
                    </div>

                </div>

                <div class="box6">
                    <h3>S级</h3>
                    <div class="left" class="common">
                        <img src="img/box4img02.png" alt="">
                        <h4>全新S级轿车</h4>
                        <p>厂商建议零售价￥89.18万起*</p>

                    </div>

                </div>
            </div>
        </div>
        <div id="bottom">
            <div class="bottom-con">

                <p class="p1"></p>
                <p>本页配置选项基于动态数据，如不可选，表示目前暂无库存。
                    <br>
                </p>
                <p>产品（含具体配置、相关细节等）以经销商展示、销售的适用于中国大陆的具体车型及产品为准。</p>
                <p>本产品网页中提及的所有价格（包括整车、配件、金融产品等）均为厂商建议零售价格。</p>
                <p>厂商建议零售价格仅为建议，不具有任何约束力。</p>
                <p>具体的零售交易价格、产品配置及交易细节请与相关授权经销商协商确定。</p>
                <p>更多详情，敬请莅临梅赛德斯-奔驰当地授权经销商，或致电400-810-8880、400-818-1188。</p>
                <p></p>

            </div>
        </div>
    </main>
    <footer id="foot">

        <div class="foot-con">

            <div class="left">
                <ul class="u1">
                    <li>
                        <a href="#">隐私协议</a>
                    </li>
                    <li>
                        <a href="#">用户协议</a>
                    </li>
                    <li>
                        <a href="#">投诉电话</a>
                    </li>
                    <li>
                        <a href="#">网站地图</a>
                    </li>
                    <li>
                        <a href="#">法律神明</a>
                    </li>
                    <li>
                        <a href="#">环保信息查询</a>
                    </li>
                    <li>
                        <a href="#">供应商平台</a>
                    </li>
                    <li style="padding: 0px">
                        <a href="#">腾势官网</a>
                    </li>
                </ul>
                <ul class="u2">
                    <li>©梅赛德斯-奔驰版权所有</li>
                    <li>京ICP备09046804号-2</li>
                    <li>京公网安备 11010502035702号</li>
                </ul>
            </div>
            <div class="right">
                <ul class="u1">
                    <li class="logo01">官方在线展厅</li>
                    <li class="logo02">官方应用</li>
                    <li class="logo03">官方微信</li>
                    <li class="logo04">天猫官方旗舰店</li>
                    <li class="logo05">官方微博</li>
                    <li class="logo06">官方微博</li>
                </ul>

            </div>
        </div>

        </div>
    </footer>
</body>

</html>

<script src="js/jquery.min.js"></script>
<script src="js/01.js"></script>
<script src="js/gouche.js"></script>
<script>
        $("#head .p1").html(sessionStorage.getItem("userinfor"))
     </script>